<template>
  <n-message-provider>
    <div class="container">
      <div class="header">
        <div class="f-1">
          <router-link to="/">
            <img src="./assets/img/logo.png" class="logo" alt="logo" title="Lottery" />
          </router-link>
        </div>
        <h1 class="motto" title="Lottery">
          <router-link to="/">Lottery</router-link>
        </h1>
        <div class="f-1"></div>
      </div>
      <div class="body">
        <router-view></router-view>
      </div>
      <div class="footer">
        <div class="f-1"></div>
        <div class="copy">Copyright &copy; {{ thisYear }} tymyd.cn</div>
        <div class="f-1 f-end">
          <a href="https://gitee.com/huelse/lottery-client" target="_blank">
            <img src="./assets/img/gitee.ico" class="gitee" alt="gitee" />
          </a>
        </div>
      </div>
    </div>
  </n-message-provider>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { NMessageProvider } from 'naive-ui'
import axios from 'axios'
import moment from 'moment'
import { ApiPrefix } from './config.js'

const thisYear = ref(moment().year())

onMounted(() => {
  const token_data = JSON.parse(localStorage.getItem('token'))
  if (!token_data || token_data.expiredAt <= moment().unix()) {
    axios.post(`${ApiPrefix}/getToken`)
      .then((r) => {
        const new_token = JSON.stringify({
          expiredAt: moment().add(1, 'hour').unix()
        })
        if (r.data) localStorage.setItem('token', new_token)
      })
      .catch((e) => {
        console.log(e)
      })
  }
})
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-width: 1276px;
  margin: 0 auto;
}
.header {
  display: flex;
  align-items: center;
  width: 100%;
  height: 72px;
  user-select: none;
}
.body {
  display: flex;
  width: 100%;
}
.footer {
  display: flex;
  align-items: center;
  width: 100%;
  height: 72px;
}
.copy {
  background: linear-gradient(to left, #1ba784, #fbda41);
  background-clip: text;
  -webkit-background-clip: text;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
}
.motto {
  font-size: 400%;
  background: linear-gradient(to right, #ee3f4d, #815c94);
  background-clip: text;
  -webkit-background-clip: text;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  margin: 0;
}
.f-1 {
  flex: 1;
}
.f-end {
  display: flex;
  justify-content: flex-end;
}
.logo {
  width: 32px;
  height: 32px;
}
.gitee {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}
@media screen and (max-width: 700px) {
  .logo {
    display: none;
  }
}
</style>

<style>
html,
body {
  padding: 0;
  margin: 0;
  font-family: v-sans, v-mono;
}
a {
  text-decoration: none;
}
</style>
